<div class="content">
  <h3 style="font-weight: bold; margin-top:30px;">
    Introducing the New Sustainalytics ESG Risk Rating
    <span class="superscript beta-badge" style="font-size:0.45em; top:-0.55em;">BETA</span>
  </h3>
  <div class="sidebar">
    <p style="margin-top:20px;">
      Sustainalytics' ESG Risk Rating enhances investment decision-making by providing the most accurate measure of the degree
      to which enterprise value is at risk, driven by environmental, social and governance factors:
    </p>
    <div style="margin-bottom:10px;">
      <div class="listing-first-column">
        <img [src]="resourcesUrl + '/listing_icon_methodology.png'" height="50px" />
      </div>
      <div class="listing-second-column">
        An advanced methodology for rating absolute ESG risk, while allowing for best in class analysis.
      </div>
    </div>
    <div style="margin-bottom:10px;">
      <div class="listing-first-column">
        <img [src]="resourcesUrl + '/listing_icon_insights.png'" height="50px" />
      </div>
      <div class="listing-second-column">
        Deep insights from multiple exposure factors including subindustry, business model, geography and incidents history.
      </div>
    </div>
    <div style="margin-bottom:10px;">
      <div class="listing-first-column">
        <img [src]="resourcesUrl + '/listing_icon_corporate_governance.png'" height="50px" />
      </div>
      <div class="listing-second-column">
        Underpinned by fully integrated, comprehensive corporate governance ratings and analysis.
      </div>
    </div>
    <div style="margin-bottom:10px;">
      <div class="listing-first-column">
        <img [src]="resourcesUrl + '/listing_icon_transparent_methodology.png'" height="50px" />
      </div>
      <div class="listing-second-column">
        Transparent methodology and multiple levels of data to provide clients with custom ESG solutions.
      </div>
    </div>
    <div style="display: none;" class="">
      <span style="font-weight:900;">First time user?</span>
      <a target="_blank" href="http://www.sustainalytics.com/esg-research-ratings/">
        Learn more about the new methodology
      </a>
    </div>
    <div style="margin-bottom:10px;">     
      <div class="listing-second-column">
          <b>First time user?</b> We encourage you to make use of the following guidance:
          <ul>
            <li>
              <a href="javascript:;" (click)="tutorialModal.open()">ESG Risk Rating Tutorial</a> 
            </li>
            <li>
                <a href="javascript:;" (click)="signalsModal.open()">Main signals to look for in a company report</a>
            </li>
            <li>
                <a href="javascript:;" (click)="scoringModal.open()">Introduction to Scoring</a>                
            </li>
          </ul>
      </div>
    </div>
  </div>
  <div class="half-col">
    <div style="font-weight: 900; padding: 20px 0 10px 0;">
      Universe Rating Distribution
    </div>
    <div class="row">
      <div ratingDistributionChart [chartID]="'distributionchart'" [chartData]="riskDistribution" [showRiskLevels]="true" [riskLevels]="riskClusters"
        [primaryName]="'Universe'" [hidePlus]="true">
        <div id='distributionchart' style="height:280px;"></div>
        <div id='benchmarkChartAxis' style="height: 25px; margin-top: 0px;"></div>
      </div>
    </div>
  </div>
  <div style="margin-top:40px;">
    <div style="font-weight:bold; font-size: 18px; margin-bottom:-10px;">
      Find a Company
    </div>
    <list-risk-rating #list (onLoad)="companiesLoaded()" [url]="containerUrl"></list-risk-rating>
  </div>
</div>

<ngx-smart-modal #tutorialModal identifier="tutorialModal" [customClass]="'largeModal'" (onOpen)="play(videoTutorial)" (onClose)="stop(videoTutorial)">
    <video controls="controls" style="width: 100%; margin-top: 20px;" #videoTutorial>
        <source type="video/mp4" [src]="'http://globalaccess-tutorials.s3.amazonaws.com/Recording%20RR%20tutorial_Clark2.mp4'">
        <span title="No video playback capabilities, please download the video below">Global Access Overview</span>
    </video>    
</ngx-smart-modal>

<ngx-smart-modal #signalsModal identifier="signalsModal" [customClass]="'largeModal'" (onOpen)="play(signalsTutorial)" (onClose)="stop(signalsTutorial)">
    <video controls="controls" style="width: 100%; margin-top: 20px;" #signalsTutorial>
        <source type="video/mp4" [src]="'http://globalaccess-tutorials.s3.amazonaws.com/Recording%20RR%20tutorial_Darragh.mp4'">
        <span title="No video playback capabilities, please download the video below">Global Access Overview</span>
    </video>    
</ngx-smart-modal>

<ngx-smart-modal #scoringModal identifier="scoringModal" [customClass]="'largeModal'" (onOpen)="play(scoringTutorial)" (onClose)="stop(scoringTutorial)">
    <video controls="controls" style="width: 100%; margin-top: 20px;" #scoringTutorial>
        <source type="video/mp4" [src]="'http://globalaccess-tutorials.s3.amazonaws.com/Recording%20RR%20tutorial_Sophia2.mp4'">
        <span title="No video playback capabilities, please download the video below">Global Access Overview</span>
    </video>    
</ngx-smart-modal>